<template>
  <div class="shop-box"  @touchstart="touchStart($event)" @touchend="touchEnd($event)">  
    <div class="filter-top" @click="showFilter = true"> 
      请选择筛选条件 <div class="isclick"></div> 
    </div>
    <div class="tab-nav" >
      <div :class="['tab-item', tab_idx == 1 ? 'active' : ''] " @click="changeTab(1)">
        店铺
      </div>
      <div :class="['tab-item', tab_idx == 2 ? 'active' : ''] " @click="changeTab(2)"> 
        仓库
      </div>
    </div>

    <!-- <div v-for="(item,index) in shopList" :key="index" class="shop-item" @click="goShopDetail()">
        <div class="cityName">{{item.cityName}}</div>
        <div v-for="(shop,idx) in item.list" :key="idx" class="adrees">
            <span class="shopName">{{shop.shopName}}</span> <span>{{shop.adreess}}</span>
        </div>
    </div> -->
    <!-- 店铺列表 -->
    <div v-show="tab_idx == 1">
      <div v-for="(item,idx) in shopList" :key="idx" class="adrees" @click="goShopDetail(item.storeId)">
        <span class="shopName">{{item.storeName}}</span> <div class="adress-text">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</div>
      </div> 
    </div>

    <!-- 仓库列表 -->
    <div v-show="tab_idx == 2">
      <div v-for="(item,idx) in warehouseList" :key="idx" class="adrees" @click="goWarehouseDetail(idx)">
        <span class="shopName">{{item.name}}</span> <div class="adress-text">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</div>
      </div>
    </div>
    <div class="load-more" v-if="(tab_idx == 1 && this.shopFilter.totalPage > this.shopFilter.pageNum )||(tab_idx == 2 && this.warehouseFilter.totalPage > this.warehouseFilter.pageNum )">上拉加载更多</div>  
    <!-- <div class="load-end" v-else>——————没有更多了———————</div>   -->
    
    <div class="height120"></div>
    <div class="addbtn isbtn" @click="addShop()">新建{{tab_idx == 1 ? '店铺' : '仓库'}} </div>
    <!--  下拉筛选 -->
    <top-filter :showFilter.sync="showFilter">
      <div class="filter-content" @click.stop>
        <search v-model="searchText"
                position= "relative"
                placeholder="请输入名称"
                ref="search">
        </search>

        <div class="city-choose-name">城市</div>
        <div class="row-box">
          <group>
            <popup-picker v-model="city" show-name :data="cityList" placeholder="请选择城市"></popup-picker>
          </group> 
        </div>
        <div class="btn-box">
          <div class="reset btn" @click="reset">重置</div>
          <div class="confirm btn" @click="confirmSelect">确认</div>
        </div>
      </div>
    </top-filter>
    <!-- 下拉筛选end -->
  </div>

</template>

<script>
import row from '@/components/row'
import topFilter from '@/components/topFilter'
import api from '@/api/api.js' 
import { Group, PopupPicker,XDialog,Search } from 'vux'
export default { 
  components: {
    row,
    topFilter,
    Search,
    XDialog,
    Group, 
    PopupPicker
  },
  data () {
    return {
      shopFilter:{
        pageNum:1,
        pageSize:20,
        name:'',
        city:'',
        totalPage:0,
      },
      warehouseFilter:{
        pageNum:1,
        pageSize:20,
        name:'',
        city:'',
        totalPage:0,
      },
      tab_idx:1,
      showFilter:false,
      cityList:[],
      searchText:'',
      city:[],
      shopList:[],
      warehouseList:[],
      isLoading:false,
    }
  },
  mounted () {
    this.shopFilter.pageNum = 1;
    this.getList();
    this.getCity();
  },
  filters: {
     
  },
  methods: {
    getCity(){ 
      api.publick.cityList({},res=>{
        let cityArr = res.result.map(item=>{
          return {name: item.city,value:item.city}
        })
        this.cityList = [cityArr]; 
      })
    },
    //重置筛选
    reset(){ 
      this.searchText = '';
      this.city = []; 
    },
    filterShow(){
      this.showFilter = !this.showFilter ;
    },
    confirmSelect(){
      this.shopFilter.name = this.searchText;
      this.warehouseFilter.name = this.searchText;
      if(this.tab_idx == 1){
        this.shopFilter.pageNum = 1;
        this.shopFilter.city = this.city[0] ? this.city[0] : '';
        this.getList();
      }else{
        this.warehouseFilter.pageNum = 1;
        this.warehouseFilter.city = this.city[0] ? this.city[0] : ''; 
        this.getWarehouseList();
      }
      this.showFilter = false;
    }, 
    changeTab(idx){
      this.tab_idx=idx;
      // 请求过就不再请求
      if(idx==1){ //店铺

      }else if(idx==2){ //仓库
        if(this.warehouseList.length==0){
          this.getWarehouseList();
        }
      }
    },
    
    addShop(){
      if(this.tab_idx==1){
        this.$store.commit("setWarehouseList",[]);
        this.$router.push("/addShop") 
      }else{
        this.$router.push("/warehouseAdd") 
      }
    },
    goShopDetail(id){
      this.$router.push({path:"/shopDetail",query:{id:id}})
    },
    goWarehouseDetail(idx){
      this.$store.commit("setWarehouseDetail",this.warehouseList[idx]);
      this.$router.push({path:"/warehouseDetail"})
    },
    getList(){
      let data = {
        pageNum: this.shopFilter.pageNum,
        pageSize: this.shopFilter.pageSize
      }
      if(this.shopFilter.name){
        data.name = this.shopFilter.name;
      }
       if(this.shopFilter.city){
        data.city = this.shopFilter.city;
      }
      this.isLoading = true;
      api.shopMng.shopList(data,res=>{ 
        this.isLoading = false;
        this.shopList= this.shopFilter.pageNum == 1 ? res.result.data :this.shopList.concat(res.result.data);
        this.shopFilter.totalPage = res.result.totalPage;
      })
    },
    getWarehouseList(){
      let data = {
        pageNum: this.warehouseFilter.pageNum,
        pageSize: this.warehouseFilter.pageSize
      }
      if(this.warehouseFilter.name){
        data.name = this.warehouseFilter.name;
      }
      if(this.warehouseFilter.city){
        data.city = this.warehouseFilter.city;
      }
      this.isLoading = true;
      api.warehouseMng.warehouseList(data,res=>{ 
        this.isLoading = false;
        this.warehouseList = this.warehouseFilter.pageNum == 1 ? res.result.data : this.warehouseList.concat(res.result.data);
        this.warehouseFilter.totalPage = res.result.totalPage;
      })
    },
     touchStart(e) {
        this.startY = e.targetTouches[0].pageY;
        this.startX = e.targetTouches[0].pageX;  
    },
    scrollToEnd(e) {
        let scrollHeight = this.$el.scrollHeight; 
        let clientHeight = this.$el.clientHeight; 
        let scrollTop = this.$el.scrollTop;  
        // console.log("111",scrollTop)
        // console.log(clientHeight)
        // console.log(scrollHeight)
        if (scrollTop + clientHeight >= scrollHeight -60 ) { //下拉到底了
          console.log(111)
          this.doLoadMore()  
        } 
    },
    touchEnd(e) {
      if (this.isLoading) {
          return;
      }
      let endX = e.changedTouches[0].pageX,
          endY = e.changedTouches[0].pageY,
          dy = this.startY - endY,
          dx = endX - this.startX;
      if(Math.abs(dx) < 2 && Math.abs(dy) < 2) {
          return;
      }
      if (endY < this.startY) {
          this.scrollToEnd(e)
      }
    },
    doLoadMore() { 
      if(this.tab_idx == 1){
        if(this.shopFilter.pageNum < this.shopFilter.totalPage){
          ++this.shopFilter.pageNum;
          this.getList()
        }
        return
      } else{
        if(this.warehouseFilter.pageNum < this.warehouseFilter.totalPage){
          ++this.warehouseFilter.pageNum;
          this.getWarehouseList();
        }
        return
      }
    }, 

  }
}
</script>
<style lang="less" scoped>

  .tab-nav{
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    height: 40px;
    display: flex;
    color: #999;
    background: #fff;
    z-index: 3;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    .tab-item{
      flex: 1;
      line-height: 40px;
      text-align: center;
      position: relative;
      &.active{
        color: #333;
        font-weight: 600;
        &::before{
          content: '';
          position: absolute;
          width: 16%;
          left: 42%;
          height: 3px;
          border-radius: 2px;
          background: #FABE00;
          bottom: 0;
        }
      }
    }
  }
    .height120{
        height: 60px;
    }
    .addbtn{
        text-align: center;
        line-height: 50px;
        background: #FABE00;
        color: #fff;
        height: 50px;
        font-size: 16px;
        letter-spacing: 4px;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
    }
    .shop-box{
      padding-top: 94px;
      height: 100vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      transition-duration: 300ms;
    }
    .cityName{
        font-size: 16px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
        padding-left: 16px;
        margin-top: 10px;
    }
    .adrees{
        height: 44px;
        line-height: 44px;
        padding-left: 20px;
        padding-right: 20px;
        display: flex;
        justify-content: space-between;
        position: relative;
        color: #999;
        font-size: .22rem;
        .shopName{
          color:#333;
          margin-right: .20rem;
          font-size: .26rem;
          font-weight: blod;
        }
        &::before{
            content: '';
            position: absolute;
            right: 0;
            left: 12px;
            bottom: 0;
            height: 1px;
            background: #eee;
        }
    }
    .city-choose-name{
        margin-top: 15px;
    }
    .filter-top{
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        border-bottom: 1px solid #eee;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        z-index: 3;
        .isclick{
            border-width: 0 1px 1px 0;
            margin-top: -6px;
        }
    }
    .btn-box{
        display: flex;
        width: 100%;
        margin-top: 20px;
        height: 44px;
        justify-content: space-between; 
    .btn{
        border-radius: 8px;
        height: 44px;
        width: 45%;
        line-height: 44px;
        text-align: center;
        color: #fff;
        &:active{
        opacity: .7;
        }
        &.reset{
        background: #ddd;
        }
        &.confirm{
        background: #FABE00;
        }
    }
}
.search-box{
    width: 90%;
}
.iconshaixuan{
    color: #999;
    margin-left: 6px;
    font-size: 18px;
}
/deep/.weui-search-bar__label{
  top: 3px;
}
.filter-content{
  background: #fff;
  width: 100%;
  padding: 20px;
  /deep/.weui-search-bar:before{
    height: 0;
  }
  /deep/.weui-search-bar::after{
    height: 0;
  }
  .row-box{
    margin-bottom: 20px;
  }
  .filter-title{
    padding-top: 20px;

  }
  .data-time-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
/deep/.vux-popup-picker-select{
  text-align: left !important;
}
/deep/.weui-search-bar,.vux-search-fixed{
  position: relative !important;
  padding: 0;
  background: #fff;
}
/deep/.weui-search-bar__cancel-btn{
  text-decoration: none;
}
/deep/.weui-search-bar:after{
  display: none;
}
/deep/.weui-search-bar::before{
  display: none;
}
.adress-text{
  flex: 1;
  padding-left: .24rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: right;
}
</style>